<html>
<head>
<style>
#myDiv {}
#myDiv li{float:left;padding:20px;position:relative}
.anh-slide1{float:left;padding:0px;width:200px;background:#006;height:100px;
}
.anh-slide2{float:left;padding:0px;width:100px;background:#0F0;height:100px;
}

.anh-slide3{float:left;padding:0px;width:100px;background:#FF0;height:100px;
}
.anh-slide4{float:left;padding:0px;width:200px;background:#FF0;height:100px;
}
.anh-slide5{float:left;padding:0px;width:100px;background:#FF0;height:100px;
}

.anh-slide6{float:left;padding:0px;width:100px;background:#FF0;height:100px;
}
.anh-slide7{float:left;padding:0px;width:100px;background:#FF0;height:100px;
}
.anh-slide2 span{background:#F93;width:100px;height:100px;display:block;}
.anh-slide3 span{background:#009;width:100px;height:100px;display:block}

.anh-slide5 span{background:#CF3;width:100px;height:100px;display:block}
.anh-slide6 span{background:#009;width:100px;height:100px;display:block}
.anh-slide7 span{background:#009;width:100px;height:100px;display:block}



.nd2
{
margin-top:-100px;
width:400px;
height:100px;
background:#C0C;
animation:mymove1 8s;
animation-iteration-count:infinite;
/* Firefox */
-moz-animation:mymove1 8s;
-moz-animation-iteration-count:infinite;
/* Safari and Chrome */
-webkit-animation:mymove1 8s;
-webkit-animation-iteration-count:infinite;
/* Opera */
-o-animation:mymove1 8s;
-o-animation-iteration-count:infinite;
}

@keyframes mymove1
{
from {width:100px}
to {width:0px}
}

@-moz-keyframes mymove1 /* Firefox */
{
from {width:100px}
to {width:0px}}

@-webkit-keyframes mymove1 /* Safari and Chrome */
{
from {width:100px}
to {width:0px}
}

@-o-keyframes mymove1 /* Opera */
{
from {width:100px}
to {width:0px}
}







.nd3
{
margin-top:-100px;
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove2 5s;
animation-iteration-count:infinite;
/* Firefox */
-moz-animation:mymove2 5s;
-moz-animation-iteration-count:infinite;
/* Safari and Chrome */
-webkit-animation:mymove2 5s;
-webkit-animation-iteration-count:infinite;
/* Opera */
-o-animation:mymove2 5s;
-o-animation-iteration-count:infinite;
}

@keyframes mymove2
{
from {height:0px}
to {height:100px}
}

@-moz-keyframes mymove2 /* Firefox */
{
from {height:0px}
to {height:100px}
}

@-webkit-keyframes mymove2/* Safari and Chrome */
{
from {height:0px}
to {height:100px}
}

@-o-keyframes mymove2 /* Opera */
{
from {height:0px}
to {height:100px}
}














.nd5
{
margin-top:-100px;
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove4 5s;
animation-iteration-count:infinite;
/* Firefox */
-moz-animation:mymove4 5s;
-moz-animation-iteration-count:infinite;
/* Safari and Chrome */
-webkit-animation:mymove4 5s;
-webkit-animation-iteration-count:infinite;
/* Opera */
-o-animation:mymove4 5s;
-o-animation-iteration-count:infinite;
}

@keyframes mymove4
{
from {width:0px}
to {width:100px}
}

@-moz-keyframes mymove4 /* Firefox */
{
from {width:0px}
to {width:100px}}

@-webkit-keyframes mymove4/* Safari and Chrome */
{
from {width:0px}
to {width:100px}
}

@-o-keyframes mymove4 /* Opera */
{
from {width:0px}
to {width:100px}
}




.nd6
{
margin-top:-100px;
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove5 5s;
animation-iteration-count:infinite;
/* Firefox */
-moz-animation:mymove5 5s;
-moz-animation-iteration-count:infinite;
/* Safari and Chrome */
-webkit-animation:mymove5 5s;
-webkit-animation-iteration-count:infinite;
/* Opera */
-o-animation:mymove5 5s;
-o-animation-iteration-count:infinite;
}

@keyframes mymove5
{
from {height:100px}
to {height:0px}
}

@-moz-keyframes mymove5 /* Firefox */
{
from {height:100px}
to {height:0px}
}

@-webkit-keyframes mymove5/* Safari and Chrome */
{
from {height:100px}
to {height:0px}
}

@-o-keyframes mymove5 /* Opera */
{
from {height:100px}
to {height:0px}
}
.ts{width:400px;height:auto;position:absolute;top:40px}

</style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
   <script type="text/javascript">
        $(function(){
            $('li').hover(function() {
                id = $(this).attr('rel');
				li=$(this);
                $.ajax({
                    type: "POST",
                    url: "php.php",
                    data: 'hovered_id='+id,
                    success:function(data){
                     li.find('.ts').html(data);          
                    }
                });
            },function(){
               $('.ts').html('');   
            });
        });
    </script>
</head>
<body>
<?php
//include 'login_to_database.php';
mysql_connect('localhost', 'root', '');  
mysql_select_db('testss');

$result = mysql_query("SELECT * FROM `categoory` ") or die(mysql_error());

?>    <div id="myDiv">
               <ul>
                   <?php
                   while($staff = mysql_fetch_array($result))
                  {
                   ?>
      <li class="<?php echo "tuan". $staff['id'] ;?>" rel="<?php echo $staff['id'];?>"><?php echo $staff['ten'];?>
         <div class="ts"></div>
      </li>
<?php }?>
              </ul>
    </div>
    <div style="clear:both"></div>
 
</body>
</html>